<template>
  <div class="d_mainFlex container">
    <div class="d_treeBox permanageLf">
      <div class="title">
        <h3>组织结构</h3>
        <i
          class="iconfont xinjian mr5 f16 pointer"
          style="color: #83a0ff"
          @click="AddorgOrdep"
        />
      </div>
      <div class="d_nrBox">
        <div class="treeList">
          <ul>
            <li
              @click="resetAllEmployees"
              :class="classIndex === -1 ? 'on' : ''"
            >
              <i class="iconfont folderIco" />
              <p>所有成员</p>
            </li>
            <li
              v-for="(item, index) in departData"
              :key="item.index"
              :props="customProps"
              :class="classIndex === index ? 'on' : ''"
              @click="currentDepart(item, index)"
            >
              <i class="iconfont folderIco" />
              <p>{{ item.departmentName }}</p>
              <div class="btn">
                <span
                  @click.stop="UpdateDepartment(item)"
                  class="iconfont EditIco"
                ></span>
                <span
                  @click.stop="remove(item)"
                  class="iconfont DeleteIco"
                ></span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="d_main">
      <div class="title">
        <h3>共{{ employeeTotal || 0 }}人</h3>
      </div>
      <!-- 操作区 S-->
      <div class="d_operationBox">
        <div class="d_btn">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="addClick"
            >新建</el-button
          >
        </div>
        <div class="d_search">
          <el-input
            v-model="search.likeWords"
            placeholder="请输入关键字"
            size="small"
            @keyup.enter.native="getAllEmployees"
          >
            <el-button
              slot="append"
              :loading="!isDepartClick"
              type="primary"
              icon="el-icon-search"
              :disabled="!isDepartClick"
              element-loading-spinner="el-icon-loading"
              @click="getAllEmployees"
            >
              搜索
            </el-button>
          </el-input>
        </div>
      </div>
      <!-- 操作区 E-->
      <!-- 表格操作区 S-->
      <div class="d_tableOperation">
        <div class="d_condition"></div>
        <div class="d_set">
          <div @click="getAllEmployees">
            <i class="d_icon el-icon-refresh-right" />
          </div>
          <div class="setting flex">
            <HeadSeting
              :list-data.sync="tableHead"
              :table-code="$config.employeelist"
              @reset="getTableHead"
            />
          </div>
        </div>
      </div>
      <!-- 表格操作区 E-->
      <!--table板块-->
      <div ref="tableCon" class="tableCon">
        <el-table
          id="emtable"
          ref="multipleTable"
          v-loading="tabLoading"
          :data="allEmployees"
          :height="tableHeight || 'auto'"
          border
          fit
          style="width: 100%"
          @header-dragend="surverWidth"
        >
          <!--          <el-table-column type="selection" width="40" fixed="left" />-->
          <template v-for="(fruit, index) in tableHead">
            <el-table-column
              v-if="fruit.visible"
              :key="index"
              :label="fruit.columnName"
              :min-width="fruit.columnWidth || 90"
              show-overflow-tooltip
              :fixed="fruit.isFloat ? 'left' : false"
            >
              <template slot-scope="scope">
                {{ scope.row[fruit.columnCode] }}
              </template>
            </el-table-column>
          </template>
          <el-table-column label="操作" width="70px" fixed="right">
            <template slot-scope="scope">
              <div>
                <el-popover
                  :ref="`popover-${scope.$index}`"
                  placement="bottom-end"
                  popper-class="tableOp"
                  width="160"
                  :popper-options="{
                    boundariesElement: 'opBox',
                    removeOnDestroy: true,
                  }"
                  trigger="click"
                >
                  <div class="operation">
                    <ul>
                      <li
                        @click="optionsClick('modify', scope.row)"
                        v-permission="'MenuCode7-1-4'"
                      >
                        修改
                      </li>
                      <li
                        v-if="scope.row.accountState === 1"
                        @click="optionsClick('enable', scope.row)"
                        v-permission="'MenuCode7-1-3'"
                      >
                        禁用
                      </li>
                      <li
                        v-if="scope.row.accountState === 2"
                        @click="optionsClick('enable', scope.row)"
                        v-permission="'MenuCode7-1-2'"
                      >
                        启用
                      </li>
                      <li
                        v-if="scope.row.loginAccount !== '未激活'"
                        @click="optionsClick('jurisdiction', scope.row)"
                        v-permission="'MenuCode7-1-7'"
                      >
                        修改角色
                      </li>

                      <li
                        @click="optionsClick('resetPwd', scope.row)"
                        v-permission="'MenuCode7-1-6'"
                      >
                        重置密码
                      </li>
                      <li
                        @click="optionsClick('delete', scope.row)"
                        v-permission="'MenuCode7-1-5'"
                      >
                        删除
                      </li>
                    </ul>
                  </div>
                  <div slot="reference" class="pl10 opBox pointer">
                    <span class="el-icon-more c_3F61F1" />
                  </div>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 S-->
      <div class="d_pag">
        <pagination
          :total="employeeTotal || 0"
          :page.sync="search.pageIndex"
          :limit.sync="search.pageSize"
          @pagination="getAllEmployees()"
        />
      </div>
      <!-- 分页 E-->
    </div>
    <!-- 添加组织架构或者部门   -->
    <el-dialog
      title="新增组织"
      :visible.sync="isAddorgOrdep"
      custom-class="comDialog"
      width="30%"
    >
      <div class="dialogDody">
        <div v-if="!isDep" class="flex mb15">
          <div class="labelTT">组织类型</div>
          <div class="flex">
            <el-radio-group v-model="addOrgType">
              <el-radio label="department">部门</el-radio>
              <!--              <el-radio label="company">公司</el-radio>-->
            </el-radio-group>
          </div>
        </div>
        <div class="flex">
          <div class="labelTT">组织名称</div>
          <div class="flex1">
            <el-input v-model="orgName" placeholder="请输入内容" size="mini" />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddorgOrdep = false">取 消</el-button>
        <el-button
          :loading="addorgLoading"
          :disabled="addorgLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="addOrg"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改部门数据   -->
    <el-dialog
      title="修改部门名称"
      :visible.sync="isUpadatedep"
      custom-class="comDialog"
      width="30%"
    >
      <div class="dialogDody">
        <div class="flex">
          <div class="labelTT">部门名称</div>
          <div class="flex1">
            <el-input
              v-model="updateDepart.departmentName"
              placeholder="请输入内容"
              size="mini"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isUpadatedep = false">取 消</el-button>
        <el-button
          :loading="upLoading"
          :disabled="upLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="defineUpdate"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 新增人员   -->
    <el-dialog
      title="新增人员"
      :visible.sync="isAddPersonnel"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="35%"
      @close="closeDialog"
    >
      <div class="dialogDody flex flex_start">
        <div class="addHeadCon flex flex_column flex_center">
          <el-upload
            class="avatar-uploader"
            action=" "
            :show-file-list="false"
            :http-request="myUpload"
          >
            <div>
              <img
                :src="imageUrl || require('../../assets/images/head.jpg')"
                class="avatar"
              />
            </div>
            <div class="mt5"><span>点击上传头像</span></div>
          </el-upload>
        </div>
        <div class="flex1">
          <el-form
            ref="personnelForm"
            :model="personnelData"
            :rules="rules"
            label-width="80px"
            class="dialogForm"
          >
            <el-form-item label="人员名称" prop="employeeName">
              <el-input
                v-model="personnelData.employeeName"
                placeholder="请输入内容"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input
                v-model="personnelData.idCardNo"
                placeholder="请输入内容"
                size="mini"
                @blur="cardNoBlur(personnelData.idCardNo)"
              />
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input
                v-model="personnelData.mobile"
                placeholder="请输入内容"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="personnelData.employeeSex">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-form-item>
                <el-date-picker
                  v-model="personnelData.birthday"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  size="mini"
                />
              </el-form-item>
            </el-form-item>
            <el-form-item label="组织架构" prop="organizationCode">
              <el-select
                        filterable
                v-model="personnelData.organizationCode"
                placeholder="请选择"
                size="mini"
                @change="addChangeOrg"
              >
                <el-option
                  v-for="item in organizations"
                  :key="item.orgCode"
                  :label="item.orgName"
                  :value="item.orgCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="部门">
              <el-cascader
                ref="cascader"
                v-model="personnelData.orgDeparts"
                :options="dialogDepartData"
                :props="depProps"
                size="mini"
                @change="handleChange"
              />
            </el-form-item>
            <el-form-item label="职务">
              <el-input
                v-model="personnelData.position"
                placeholder="请输入内容"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="员工工号">
              <el-input
                v-model="personnelData.employeeWorkNo"
                placeholder="请输入内容"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="户籍">
              <el-input
                v-model="personnelData.huJi"
                placeholder="请输入内容"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="合同日期">
              <el-date-picker
                v-model="valueDate"
                style="width: 100%"
                size="small"
                type="daterange"
                range-separator="-"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleDateChange"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="启用账号">
              <el-switch
                v-model="personnelData.isEnabledMgt"
                active-color="#6681F4"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <div v-if="personnelData.isEnabledMgt">
              <el-form-item label="登录账号" prop="loginAccount">
                <el-input
                  v-model="personnelData.loginAccount"
                  placeholder="请输入内容"
                  size="mini"
                />
              </el-form-item>
              <el-form-item label="登录密码" prop="loginPassWord">
                <el-input
                  v-model="personnelData.loginPassWord"
                  minlength="6"
                  placeholder="请输入内容"
                  size="mini"
                />
              </el-form-item>
              <el-form-item label="角色权限" prop="role">
                <el-select
                        filterable
                  v-model="personnelData.role"
                  placeholder="请选择"
                  size="mini"
                >
                  <el-option
                    v-for="item in allroles"
                    :key="item.roleID"
                    :label="item.roleName"
                    :value="item.roleCode"
                  />
                </el-select>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddPersonnel = false">取 消</el-button>
        <el-button
          v-loading="addperLoading"
          :disabled="addperLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="RegisterNewEmployee"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑人员信息   -->
    <el-dialog
      title="编辑人员"
      :visible.sync="isEditPersonnel"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="35%"
      @close="closeDialog"
    >
      <div class="dialogDody flex flex_start">
        <div class="addHeadCon flex flex_column flex_center">
          <el-upload
            class="avatar-uploader"
            action=" "
            :show-file-list="false"
            :http-request="myUpload"
          >
            <div>
              <img
                :src="imageUrl || require('../../assets/images/head.jpg')"
                class="avatar"
              />
            </div>
            <div class="mt5"><span>点击上传头像</span></div>
          </el-upload>
        </div>
        <div class="flex1">
          <el-form
            ref="personnelEditForm"
            :model="personnelData"
            :rules="rules"
            label-width="80px"
            class="dialogForm"
          >
            <el-form-item label="人员名称" prop="employeeName">
              <el-input
                v-model="personnelData.employeeName"
                placeholder="请输入内容"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input
                v-model="personnelData.idCardNo"
                placeholder="请输入内容"
                size="mini"
                @blur="cardNoBlur(personnelData.idCardNo)"
              />
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input
                v-model="personnelData.mobile"
                placeholder="请输入内容"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="personnelData.employeeSex">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-form-item>
                <el-date-picker
                  v-model="personnelData.birthday"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  size="mini"
                />
              </el-form-item>
            </el-form-item>
            <el-form-item label="组织架构" prop="organizationCode">
              <el-select
                        filterable
                v-model="personnelData.organizationCode"
                placeholder="请选择"
                size="mini"
                @change="addChangeOrg"
              >
                <el-option
                  v-for="item in organizations"
                  :key="item.orgCode"
                  :label="item.orgName"
                  :value="item.orgCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="部门">
              <el-cascader
                ref="cascader"
                v-model="personnelData.orgDeparts"
                :options="dialogDepartData"
                :props="depProps"
                size="mini"
                @change="handleChange"
              />
            </el-form-item>
            <el-form-item label="职务">
              <el-input
                v-model="personnelData.position"
                placeholder="请输入内容"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="员工工号">
              <el-input
                v-model="personnelData.employeeWorkNo"
                placeholder="请输入内容"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="户籍">
              <el-input
                v-model="personnelData.huJi"
                placeholder="请输入内容"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="合同日期">
              <el-date-picker
                v-model="valueDate"
                style="width: 100%"
                size="small"
                type="daterange"
                range-separator="-"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleDateChange"
              >
              </el-date-picker>
            </el-form-item>

            <!-- <el-form-item label="启用账号">
              <el-switch
                v-model="personnelData.isEnabledMgt"
                active-color="#6681F4"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <div v-show="personnelData.isEnabledMgt">
              <el-form-item label="登录账号" prop="loginAccount">
                <el-input v-model="personnelData.loginAccount" placeholder="请输入内容" size="mini" />
              </el-form-item>
              <el-form-item label="登录密码" prop="loginPassWord">
                <el-input v-model="personnelData.loginPassWord" placeholder="请输入内容" size="mini" />
              </el-form-item>
              <el-form-item label="角色权限" prop="role">
                <el-select
                        filterable v-model="personnelData.role" placeholder="请选择" size="mini">
                  <el-option
                    v-for="item in allroles"
                    :key="item.roleID"
                    :label="item.roleName"
                    :value="item.roleCode"
                  />
                </el-select>
              </el-form-item>
            </div> -->
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isEditPersonnel = false"
          >取 消</el-button
        >
        <el-button
          v-loading="addperLoading"
          :disabled="addperLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="updateInit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 激活员工账号   -->
    <el-dialog
      title="激活账号"
      :visible.sync="isActiveDia"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="35%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="activeForm"
          :model="activeForm"
          :rules="activeRules"
          label-width="80px"
          class="dialogForm"
        >
          <el-form-item label="登录账号" prop="loginAccount">
            <el-input
              v-model="activeForm.loginAccount"
              placeholder="请输入内容"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="登录密码" prop="loginPassWord">
            <el-input
              v-model="activeForm.loginPassWord"
              placeholder="请输入内容"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="角色权限" prop="role">
            <el-select
                        filterable
              v-model="activeForm.role"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in allroles"
                :key="item.roleID"
                :label="item.roleName"
                :value="item.roleCode"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isActiveDia = false">取 消</el-button>
        <el-button
          v-loading="addperLoading"
          :disabled="addperLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="activeEm"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 修改角色权限 -->
    <el-dialog
      title="修改角色权限"
      :visible.sync="isJurisdiction"
      custom-class="comDialog"
      width="30%"
    >
      <div class="dialogDody">
        <div class="flex">
          <div class="labelTT">员工工号</div>
          <div class="flex1">
            <el-input
              v-model="jurisdictionForm.EmployeeCode"
              placeholder="请输入内容"
              disabled
              size="mini"
            />
          </div>
        </div>
        <div class="flex" style="margin-top: 10px">
          <div class="labelTT">员工名称</div>
          <div class="flex1">
            <el-input
              v-model="jurisdictionForm.employeeName"
              placeholder="请输入内容"
              disabled
              size="mini"
            />
          </div>
        </div>
        <div class="flex" style="margin-top: 10px">
          <div class="labelTT">角色权限</div>
          <div class="flex1">
            <el-select
                        filterable
              v-model="jurisdictionForm.RoleCode"
              placeholder="请选择角色权限"
              size="mini"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in allroles"
                :key="index"
                :label="item.roleName"
                :value="item.roleCode"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isJurisdiction = false">取 消</el-button>
        <el-button
          :loading="jurisdictionLoading"
          :disabled="jurisdictionLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="jurisdictionSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import HeadSeting from "@/components/HeadSeting";
import { arraySort } from "@/utils/index";
import { IdCard } from "@/utils/index";

export default {
  name: "PersonnelManage",
  components: { Pagination, HeadSeting },
  data() {
    var checkTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error("请输入数字"));
        } else {
          if (/^1[3-9]\d{9}$/.test(value)) {
            callback();
          } else {
            callback(new Error("电话号码格式不正确"));
          }
        }
      }, 300);
    };
    return {
      tabLoading: false,
      tableHeight: null,
      isTreeOption: false, // 部门隐藏操作弹框
      isActiveDia: false, // 激活员工弹框
      allEmployees: [],
      organizations: [], // 所有组织架构
      departData: [], // 当前组织架构对应得部门
      dialogDepartData: [], // 弹框里面当前组织架构对应得部门
      isDepartClick: true, // 是否可以点击部门
      isAddorgOrdep: false, // 添加组织架构或者部门
      isUpadatedep: false, // 是否显示修改部门名字弹框
      isAddPersonnel: false, // 是否显示新增人员弹框
      isEditPersonnel: false, // 是否显示修改人员弹框
      isJurisdiction: false, //修改角色权限弹出层
      isDep: false, // 是否添加二级部门
      classIndex: -1, // 选中分组索引
      addorgLoading: false,
      upLoading: false,
      addperLoading: false,
      jurisdictionLoading: false,
      jurisdictionForm: {
        EmployeeCode: "", //员工工号
        employeeName: "", //员工名称
        RoleCode: "", //角色代码
      },
      allroles: {}, // 所有角色数据
      imageUrl: "", // 头像链接
      addOrgType: "department", // 添加组织类型,默认部门
      orgName: "", // 新增组织机构名称
      departmentDate: {
        parentCode: "",
      }, // 新增部门参数
      customProps: {
        label: "departmentName",
        children: "children",
      },
      operations: [
        [{ text: "修改", key: "modify" }],
        //[{ text: "修改角色", key: "jurisdiction" }],
        [
          { text: "重置密码", key: "resetPwd" },
          { text: "启用", key: "enable" },
          { text: "激活", key: "activation" },
        ],
        [{ text: "删除", key: "delete" }],
      ],
      // 激活账号表单
      activeForm: {
        employeeCode: "",
        mobile: "",
        loginAccount: "",
        loginPassWord: "",
        role: "",
      },
      isEnabled: null, // 禁用or启用
      // 新增员工表单数据
      valueDate: "",
      personnelData: {
        employeeName: "",
        orgDeparts: [],
        headImage: "",
        idCardNo: "",
        employeeSex: "1",
        birthday: "",
        mobile: "",
        organizationCode: "",
        departmentCode: "",
        position: "",
        isEnabledMgt: true,
        loginAccount: "",
        loginPassWord: "",
        role: "",
        employeeWorkNo: "", //员工工号
        huJi: "", //户籍
        contractSignedDate: "", //合同开始日期
        contractExpirationDate: "", //合同结束日期
      }, // 新增人员表单数据
      employeeTotal: null,
      // 员工列表搜索条件
      search: {
        pageIndex: 1,
        pageSize: 30,
        likeWords: "",
        organizationCode: "",
        departmentCode: "",
        employeeState: "",
      },
      updateDepart: {
        departmentID: "",
        parentCode: "",
        organizationCode: "",
        departmentName: "",
      }, // 修改部门数据参数
      tableHead: [], // 表头数据
      depProps: {
        label: "departmentName",
        value: "departmentCode",
        checkStrictly: true,
      },
      rules: {
        employeeName: [
          { required: true, message: "请输入人员名称", trigger: "blur" },
        ],
        mobile: [{ required: true, validator: checkTel, trigger: "blur" }],
        organizationCode: [
          { required: true, message: "请选择组织架构", trigger: "blur" },
        ],
        loginAccount: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
        ],
        loginPassWord: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { min: 6, message: "长度至少六个字符", trigger: "blur" },
        ],
        role: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },
      activeRules: {
        loginAccount: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
        ],
        loginPassWord: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { min: 6, message: "长度至少六个字符", trigger: "blur" },
        ],
        role: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },
    };
  },
  created() {
    //  获取所有组织架构
    this.getOrganization();
    //  获取所有员工
    this.getAllEmployees();
    // 获取员工表头
    this.getTableHead();
  },
  mounted() {
    // 得到表格高度
    this.calHeight();
    // 获取所有角色数据
    this.getAllRols();
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout();
    });
  },
  methods: {
    // 新建点击事件
    addClick() {
      this.isAddPersonnel = true;
      //  获取所有组织架构
      this.getOrganization();
    },
    // 保存表头列宽度
    surverWidth(newWidth, oldWidth, column) {
      setTimeout(() => {
        const heads = [...this.tableHead];
        heads.forEach((item) => {
          if (item.columnCode === column.property) {
            item.columnWidth = column.width;
            return;
          }
        });
        this.saveHead(heads);
      }, 100);
    },

    //日期范围选择事件
    handleDateChange() {
      if (this.valueDate) {
        this.personnelData.contractSignedDate = this.valueDate[0];
        this.personnelData.contractExpirationDate = this.valueDate[1];
      } else {
        this.personnelData.contractSignedDate = "";
        this.personnelData.contractExpirationDate = "";
      }
    },

    // 表格操作事件
    optionsClick(key, data) {
      if (key === "modify") {
        // 修改
        this.isEditPersonnel = true;
        this.getInitInfo(data.employeeID);
      } else if (key === "activation") {
        // 激活
        this.isActiveDia = true;
        this.activeForm.mobile = data.mobile;
        this.activeForm.employeeCode = data.employeeCode;
      } else if (key === "resetPwd") {
        // 重置
        this.activeForm.employeeCode = data.employeeCode;
        this.restPwd();
      } else if (key === "delete") {
        this.deleEmployee(data.employeeID);
      } else if (key === "enable") {
        this.activeForm.employeeCode = data.employeeCode;
        data.accountState === 1
          ? (this.isEnabled = false)
          : (this.isEnabled = true);
        this.disableOrEnable();
      } else if (key === "jurisdiction") {
        this.getInitInfo(data.employeeID);
        this.isJurisdiction = true;
      }
    },

    //修改角色权限
    jurisdictionSubmit() {
      this.jurisdictionLoading = true;
      this.$api.user
        .UpdateEmployeeManageRole(this.jurisdictionForm)
        .then((res) => {
          this.jurisdictionLoading = false;
          this.isJurisdiction = false;
          this.$message.success("修改成功");
          this.getAllEmployees();
        })
        .catch((err) => {
          this.jurisdictionLoading = false;
        });
    },

    //身份证号失去焦点事件
    cardNoBlur(id) {
      this.personnelData.birthday = IdCard(id, 1);
    },

    // 保存表头样式变化
    saveHead(newArray) {
      const parmas = newArray;
      setTimeout(() => {
        this.$api.common.saveTableStyle(parmas).then(() => {});
      }, 300);
    },
    // 获取当前员工基础信息详情
    getInitInfo(id) {
      this.valueDate = ''
      this.personnelData.contractSignedDate = "";
        this.personnelData.contractExpirationDate = "";
      const parmas = {
        queryBy: 1,
        queryValue: id.toString(),
      };
      this.$api.user.GetSingleEmployee(parmas).then((res) => {
        this.jurisdictionForm.EmployeeCode = res.employeeCode;
        this.jurisdictionForm.employeeName = res.employeeName;
        this.jurisdictionForm.RoleCode = res.manageRole;
        this.personnelData = res;
        this.personnelData.employeeSex = res.employeeSex.toString();
        this.imageUrl = res.headImageUrl;
        this.personnelData["orgDeparts"] = [];
        this.personnelData["orgDeparts"].push(res.departmentCode);
        this.getDialogAllbm();
      });
    },
    // 重置密码
    restPwd() {
      const parmas = {
        employeeCode: this.activeForm.employeeCode,
      };
      this.$confirm("确定要重置密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.user.restPwd(parmas).then(() => {
          // 刷新部门列表
          this.getOrgDepart();
          this.$message({
            message: "密码重置成功",
            type: "success",
          });
        });
      });
    },
    // 禁用/启用员工账号
    disableOrEnable() {
      const parmas = {
        employeeCode: this.activeForm.employeeCode,
        isEnabled: this.isEnabled,
      };
      this.$confirm("确定启用/禁用, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.user.disableOrEnable(parmas).then(() => {
          this.getAllEmployees();
          this.$message({
            message: "设置成功",
            type: "success",
          });
        });
      });
    },
    // 激活员工账号
    activeEm() {
      const parmas = this.activeForm;
      this.$refs.activeForm.validate((valid) => {
        if (valid) {
          this.addperLoading = true;
          this.$api.user
            .activeEmployee(parmas)
            .then(() => {
              this.isActiveDia = false;
              this.addperLoading = false;
              this.getAllEmployees();
              this.$message({
                message: "修改成功",
                type: "success",
              });
            })
            .catch(() => {
              this.addperLoading = false;
            });
        }
      });
    },
    // 删除员工
    deleEmployee(id) {
      const parmas = {
        entityID: id,
      };
      this.$confirm("确定删除该员工账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.user.deleEmployee(parmas).then(() => {
          this.getAllEmployees();
          this.$message({
            message: "密码重置成功",
            type: "success",
          });
        });
      });
    },
    // 修改当前员工基础信息
    updateInit() {
      const parmas = this.personnelData;
      this.$refs.personnelEditForm.validate((valid) => {
        if (valid) {
          this.addperLoading = true;
          this.$api.user
            .UpdateEmployeeBaseData(parmas)
            .then(() => {
              this.isEditPersonnel = false;
              this.addperLoading = false;
              this.getAllEmployees();
              this.$message({
                message: "修改成功",
                type: "success",
              });
            })
            .catch(() => {
              this.addperLoading = false;
            });
        }
      });
    },
    handleChange(val) {
      const index = val.length - 1;
      this.personnelData.departmentCode = val[index];
      this.$refs.cascader.dropDownVisible = false;
    },
    // 获取所有角色数据
    getAllRols() {
      this.$api.user.GetAllSystemRoles().then((res) => {
        this.allroles = res;
      });
    },
    // 新员工注册
    RegisterNewEmployee() {
      const parmas = this.personnelData;
      this.$refs.personnelForm.validate((valid) => {
        if (valid) {
          this.addperLoading = true;
          this.$api.user
            .RegisterNewEmployee(parmas)
            .then(() => {
              this.isAddPersonnel = false;
              this.addperLoading = false;
              this.getAllEmployees();
              this.$message({
                message: "保存成功",
                type: "success",
              });
            })
            .catch(() => {
              this.addperLoading = false;
            });
        }
      });
    },
    // 图片上传
    myUpload(e) {
      const file = e.file;
      const type = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (
        type !== "png" &&
        type !== "jpg" &&
        type !== "jpeg" &&
        type !== "gif" &&
        type !== "bmp"
      ) {
        this.$message.error("上传图片格式错误，请重新上传!");
        return false;
      } else if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2M，请重新上传!");
        return false;
      } else {
        var formData = new FormData();
        formData.append("file", file);
        this.$api.common.UploadHeadPicture(formData).then((res) => {
          this.imageUrl = res.fileFullUrl;
          this.personnelData.headImage = res.fileName;
        });
      }
    },
    // 获取所有组织架构
    getOrganization() {
      this.$api.user.getAllOrganizations().then((res) => {
        this.organizations = res;
        this.search.organizationCode = res[0].orgCode;
        this.personnelData.organizationCode = res[0].orgCode;
        // 获取某个组织架构下得所有部门列表
        this.getOrgDepart();
        this.getDialogAllbm();
      });
    },
    // 获取所有员工列表
    getAllEmployees() {
      const parmas = this.search;
      this.isDepartClick = false;
      this.tabLoading = true;
      this.$api.user
        .getMatchEmployees(parmas)
        .then((res) => {
          this.allEmployees = res.list;
          this.allEmployees.forEach((item) => {
            for (let i in item) {
              if (!item[i] && item[i] !== 0) {
                item[i] = "--";
              }
            }
          });
          this.employeeTotal = res.totalCount;
          this.isDepartClick = true;
          this.tabLoading = false;
        })
        .catch(() => {
          this.isDepartClick = true;
          this.tabLoading = false;
        });
    },
    // 获取某个组织架构下得所有部门列表
    getOrgDepart() {
      const parmas = {
        orgCode: this.search.organizationCode,
      };
      this.$api.user.getOrgDepart(parmas).then((res) => {
        this.departData = res;
      });
    },
    AddorgOrdep() {
      this.isDep = false;
      this.isAddorgOrdep = true;
      this.orgName = "";
    },
    append(data) {
      this.isDep = true;
      this.isAddorgOrdep = true;
      this.orgName = "";
      this.departData.parentCode = data.departmentCode; // 父级部门的code
    },
    // 改变组织机构
    changeOrg(val) {
      this.personnelData.organization = val;
      this.getAllEmployees(); // 刷新员工列表
      this.getOrgDepart(); // 刷新部门列表
    },
    // 新增员工改变组织机构
    addChangeOrg() {
      this.getDialogAllbm(); // 刷新弹框里面的该组织机构下面的所有部门列表
    },
    // 弹框里面某部门下面的所有部门
    getDialogAllbm() {
      const parmas = {
        orgCode: this.personnelData.organizationCode,
      };
      this.$api.user.getOrgDepart(parmas).then((res) => {
        this.dialogDepartData = res;
      });
    },
    // 删除部门
    remove(data) {
      const parmas = {
        entityID: data.departmentID,
        entityCode: data.departmentCode,
      };
      console.log();
      this.$confirm(
        "确定要删除【" + data.departmentName + "】部门, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$api.user.DeleteDepartment(parmas).then(() => {
            // 刷新部门列表
            this.getOrgDepart();
            this.$message({
              message: "该部门已删除",
              type: "success",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 修改部门数据
    UpdateDepartment(data) {
      this.isUpadatedep = true;
      this.updateDepart.departmentName = data.departmentName;
      this.updateDepart.organizationCode = this.search.organizationCode;
      this.updateDepart.parentCode = data.parentCode;
      this.updateDepart.departmentID = data.departmentID;
    },
    // 修改部门数据
    defineUpdate() {
      const parmas = this.updateDepart;
      this.$api.user.UpdateDepartment(parmas).then(() => {
        this.isUpadatedep = false;
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.getOrgDepart(); // 刷新部门数据
      });
    },
    currentDepart(data, index) {
      this.search.departmentCode = data.departmentCode;
      // 获取所有员工列表
      this.getAllEmployees();
      this.classIndex = index;
    },
    // 重置所有员工搜索条件
    resetAllEmployees() {
      this.search = this.$options.data().search;
      // 获取所有员工列表
      this.getAllEmployees();
      this.classIndex = -1;
    },
    // 新增公司
    addCompany() {
      const parmas = {
        orgName: this.orgName,
      };
      this.addorgLoading = true;
      this.$api.user
        .AddOrganization(parmas)
        .then((res) => {
          this.$message({
            message: "新增公司成功",
            type: "success",
          });
          this.getOrganization();
          this.isAddorgOrdep = false;
          this.addorgLoading = false;
        })
        .catch(() => {
          this.addorgLoading = false;
        });
    },
    // 新增部门
    addDepartment() {
      this.addorgLoading = true;
      const parmas = {
        parentCode: this.departData.parentCode,
        OrganizationCode: this.search.organizationCode,
        departmentName: this.orgName,
      };
      this.$api.user
        .AddDepartment(parmas)
        .then((res) => {
          this.$message({
            message: "新增部门成功",
            type: "success",
          });
          this.isAddorgOrdep = false;
          this.addorgLoading = false;
          // 刷新部门列表
          this.getOrgDepart();
        })
        .catch(() => {
          this.addorgLoading = false;
        });
    },
    // 新增组织
    addOrg() {
      if (this.addOrgType === "department") {
        this.addDepartment();
      } else if (this.addOrgType === "company") {
        this.addCompany();
      }
    },
    // 获取人员列表表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.employeelist,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort("columnSort"));
        this.tableHead = res;
      });
    },
    // 批量操作
    handleCommand(command) {
      this.$message("click on item " + command);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect();
        this.tableHeight = rect.height;
      });
    },
    // 关闭弹框事件
    closeDialog() {
      // 关闭弹框的时候清空数据
      if (this.$refs.personnelForm) {
        this.$refs.personnelForm.resetFields();
      }
      if (this.$refs.personnelEditForm) {
        this.$refs.personnelEditForm.resetFields();
      }
      this.personnelData = this.$options.data().personnelData;
      this.imageUrl = this.$options.data().imageUrl;
    },
  },
};
</script>
<style lang="scss" scoped>
.addHeadCon {
  width: 120px;
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    box-shadow: 0px 2px 6px 0px rgba(232, 239, 251, 1);
  }
}

.permanageLf {
  .treeOpdiv {
    width: 120px;
    top: 25px;
    ul {
      padding: 4px 0;
      li {
        line-height: 30px;
        text-align: center;
        &:hover {
          background: #3f61f1;
          color: #fff;
        }
      }
    }
  }
  .orgCon:hover {
    background: #eff2ff;
  }

  .memberList {
    li {
      margin: 10px 0;
    }
  }

  .custom-tree-node {
    width: 100%;

    .treeoprions {
      display: none;
    }
  }

  .custom-tree-node:hover {
    .treeoprions {
      display: block !important;
    }
  }
}

.dialogDody {
  .labelTT {
    width: 88px;
    line-height: 28px;
  }
}
</style>
